<template>
  <div class="right-container">
    <div v-if="widget">
      <TextSetting v-if="widget.type === 'text'" />
      <ImageSetting v-if="widget.type === 'image'" />
      <RectSetting v-if="widget.type === 'rect'" />
      <LineSetting v-if="widget.type === 'line'" />
      <QrCodeSetting v-if="widget.type === 'qrCode'" />
      <BarCodeSetting v-if="widget.type === 'barCode'" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useEleStore } from '@/store/modules/coms'
  import TextSetting from '../widget/text/setting.vue'
  import ImageSetting from '../widget/image/setting.vue'
  import RectSetting from '../widget/rect/setting.vue'
  import LineSetting from '../widget/line/setting.vue'
  import QrCodeSetting from '../widget/qrCode/setting.vue'
  import BarCodeSetting from '../widget/barCode/setting.vue'
  const Store = useEleStore()
  const { getCurrentWidget: widget } = storeToRefs(Store)
</script>

<style lang="scss" scoped>
  .right-container {
    min-width: 260px;
    padding: 0 12px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.1);
  }
</style>
